<template>
    <div class="unitBar">
    <div class="componentTitle">这是receiveChild.vue子组件</div>
    <div class="componentInfo">
      <span>显示来自父组件的值：<b>{{jsonProps.content}}</b></span>
      <span>显示来自父组件的对象值：<b>姓名：{{jsonProps.objinfo.name}}年龄：{{jsonProps.objinfo.age}}</b></span>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
const jsonProps=defineProps({
    content:String,
    objinfo:Object,
})
</script>

<style scoped>
.unitBar{
    width: 100%;
    border: 2px solid #0076ee;
}
.componentTitle{
  width: 100%;
  height: 30px;
  background-color:  #0076ee;
  line-height: 30px;
  text-align: center;
  color: #ffff;
}
.componentInfo{
  height: 40px;
  line-height: 50px;
}
span{
    margin: 0 20px;
}
</style>